 
	<style type="text/css">
		.am-anima{
			width: 150px;
		    height: 150px;
		    line-height: 150px;
		    text-align: center;
		    background-color: #009688;
		    cursor: pointer;
		    color: #fff;
		    margin: 30px;
		    border-radius: 50%;
		}
	</style>
	


	<!-- amazeui / 动画 start-->
	<!-- 文档地址 http://amazeui.shopxo.net/css/animation/ -->
	
	<ul style="list-style: none;padding: 1px;margin:0;display: flex;justify-content: space-around;flex-wrap: wrap;">
		<li>
			<div class="am-anima" data-anim='am-animation-fade'>淡入</div>
		</li>
		<li>
			<div class="am-anima" data-anim='am-animation-scale-up'>逐渐放大</div>
		</li>
		<li>
			<div class="am-anima" data-anim='am-animation-scale-down'>逐渐缩小</div>
		</li>
		<li>
			<div class="am-anima" data-anim='am-animation-slide-top'>顶部滑入</div>
		</li>
		<li>
			<div class="am-anima" data-anim='am-animation-slide-bottom'>底部滑入</div>
		</li>
		<li>
			<div class="am-anima" data-anim='am-animation-slide-left'>左侧滑入</div>
		</li>
		<li>
			<div class="am-anima" data-anim='am-animation-slide-right'>右侧滑入</div>
		</li>
		<li>
			<div class="am-anima" data-anim='am-animation-shake'>左右摇动</div>
		</li>
	</ul>
	<ul style="list-style: none;padding: 1px;margin:0;display: flex;justify-content: space-around;flex-wrap: wrap;">
		<li>
			<div class="am-anima am-animation-reverse" data-anim='am-animation-fade'>反向淡入</div>
		</li>
		<li>
			<div class="am-anima am-animation-reverse" data-anim='am-animation-scale-up'>反向逐渐放大</div>
		</li>
		<li>
			<div class="am-anima am-animation-reverse" data-anim='am-animation-scale-down'>反向逐渐缩小</div>
		</li>
		<li>
			<div class="am-anima am-animation-reverse" data-anim='am-animation-slide-top'>反向顶部滑入</div>
		</li>
		<li>
			<div class="am-anima am-animation-reverse" data-anim='am-animation-slide-bottom'>反向底部滑入</div>
		</li>
		<li>
			<div class="am-anima am-animation-reverse" data-anim='am-animation-slide-left'>反向左侧滑入</div>
		</li>
		<li>
			<div class="am-anima am-animation-reverse" data-anim='am-animation-slide-right'>反向右侧滑入</div>
		</li>
		<li>
			<div class="am-anima am-animation-reverse" data-anim='am-animation-shake'>反向左右摇动</div>
		</li>
	</ul>
	

	<script type="text/javascript">
		$('.am-anima').click(function(){
			var othis = $(this), anim = othis.data('anim');
			console.log(othis.parent().index());
			othis.removeClass(anim);
		    setTimeout(function(){
		      othis.addClass(anim);
		    });
	        setTimeout(function(){
	          othis.removeClass(anim);
	        }, 1300);
		    
			
		})
	</script>
	<!-- amazeui / 动画 end-->
	